.icon {
    color: red;
    font-size: 50px;
}

body {
    /* background-color: aqua; */
}

/* 铺满整个视口的遮罩层 */
/* .box{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 1);
} */

/* 
div{
    width: 100px;
    height: 100px;
    padding: 50px;
    border: 2px dotted;
    overflow: hidden;
    background-color: aqua;
    background-clip: content-box;
} */

/* 相对定位 相对于元素本身的位置偏移，
原本所占空间不变，不脱离文档流 */
.box1 {
    width: 200px;
    height: 200px;
    background-color: pink;
    /* position: relative;
    left: 200px;
    top: 100px; */
}

/* 相对于设置了定位属性（除static）的祖先元素偏移 */
/* 脱离文档流，不在占据空间 */
/* 子绝父相 */
.box2 {
    margin: 20px;
    width: 150px;
    height: 200px;
    background-color: palegreen;
    position: absolute;
    /* left: 200px; */
    top: 100px;
}


.parent {
    width: 400px;
    height: 400px;
    border: 2px solid;
    position: relative;
    left: 500px;
    top: 100px;
}

.child1 {
    width: 100px;
    height: 100px;
    background-color: rgba(0, 0, 0, 1);
    position: absolute;
    left: 50px;
    top: 50px;
    /* transform: translate(-50%,-50%); */
    z-index: 99;
}

.child2 {
    width: 100px;
    height: 100px;
    background-color: rgba(20, 24, 218, 1);
    position: absolute;
    left: 70px;
    top: 70px;
    z-index: 6;
}

.child3 {
    width: 100px;
    height: 100px;
    background-color: rgba(64, 180, 51, 1);
    position: absolute;
    left: 80px;
    top: 80px;
}

.child4 {
    width: 100px;
    height: 100px;
    background-color: rgba(240, 39, 39, 1);
    position: absolute;
    left: 90px;
    top: 90px;
}

/* 蒙版 遮罩层 */
.box3 {
    width: 300px;
    height: 296px;
    overflow: hidden;
    position: relative;
}

.mask {
    width: 300px;
    height: 296px;
    background-color: rgba(0, 255, 0, .5);
    position: absolute;
    bottom: 0px;
    display: none;
    transition: 2s;
}

img:hover+.mask {
    display: block;
    /* bottom: -150px; */
}




.father {
    width: 400px;
    height: 400px;
    border: 2px solid;
    position: relative;
}

.father a {
    text-decoration: none;
    color: #fff;
    background-color: gray;
    margin: 15px;
}


section {
    width: 400px;
    height: 350px;
    position: absolute;
    bottom: 0;
}

.blue {
    background-color: blue;
    z-index: 1;
}

.red {
    background-color: red;
}

.green {
    background-color: green;
}

.pink {
    background-color: pink;
}

.yellow {
    background-color: yellow;
}


a:hover+section {
    z-index: 3;
}


.box {
    width: 800px;
    height: 2000px;
    border: 2px solid;
}

.box1 {
    width: 600px;
    height: 100px;
    margin: 20px;
    background-color: red;
}
.sticky{
    width: 600px;
    height: 100px;
    margin: 20px;
    background-color: yellow;
    position: sticky;
    top: 0px;
}